<template>
  <svg>
    <g :transform="'translate(' + translateX + ',' + translateY + ')'">
      <rect width="40" height="40" fill="none" x="2" y="32" stroke="#FFFFFF" stroke-width="2"></rect>
      <text x="7" y="47" fill="#ECF247" font-size="10px">A</text>
      <text x="18" y="47" fill="#4AE21E" font-size="10px">B</text>
      <text x="29" y="47" fill="#FF5B41" font-size="10px">C</text>
      <rect width="10" height="15" fill="#FF5B41" x="6" y="52"></rect>
      <rect width="10" height="15" fill="#FF5B41" x="17" y="52"></rect>
      <rect width="10" height="15" fill="#FF5B41" x="28" y="52"></rect>
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
      rectSvgCompData:{
        type:Array,
          default(){
              return []
          }
      }
  },
  data() {
      return{

      }
  },
    method(){

    },
    mounted() {
        console.log(this.rectSvgCompData)
    }
}
</script>
<style lang="less" scoped>
</style>